<template>
	<view class="logistics-container">
		<view class="bgcf">
			<view v-if="packageList.length>0">
				<view class="box">
					<scroll-view scroll-x style="white-space: nowrap; display: flex;" :scroll-into-view="'package-' + activeIndex"
							scroll-with-animation>
						<view :id="'package-' + i" class="package" :class="{ 'selected': activeIndex === i }" v-for="(e,i) in packageList" @click="packageClick(e,i)">
							<view class="package-left">
								<text class="name" :class="{ 'selected': activeIndex === i }">包裹{{i+1}}</text>
								<text class="num">共{{e.goods_count}}件</text>
							</view>
							<view class="flex">
								<uv-icon :name="item" v-for="item in e.goods_images" size="30"/>
							</view>
						</view>
					</scroll-view>
				</view>
				<uv-gap height="10" bgColor="transparent" />
			</view>
			<uv-cell-group>
				<!-- <uv-cell v-if="packageList.length==1">
					<template v-slot:title>
						<text class="status-title">包裹{{getStatusText(logisticsData.StateEx)}}</text>
					</template>
					<template v-slot:label>
						<text style="font-size: 28rpx;color: #333;">收件地址：
							{{ info.address.province }}{{info.address.city}}{{info.address.area}}{{info.address.address}}</text>
					</template>
				</uv-cell> -->
				<uv-cell>
					<!-- 自定义左侧标题 -->
					<template v-slot:title>
						<text>{{ logisticsData.ShipperName ? logisticsData.ShipperName : '运单编号' }}: {{logisticsData.LogisticCode}}</text>
					</template>
					<!-- 自定义右侧值 -->
					<template v-slot:value v-if="logisticsData.LogisticCode">
						<uv-button type="primary" size="mini" text="复制" @click="copyTrackingNumber"></uv-button>
					</template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon>
						<uv-icon size="50rpx" name="empty-search"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell v-if="logisticsData.DeliveryManTel">
					<!-- 自定义左侧标题 -->
					<template v-slot:title>
						<text>快递员: {{logisticsData.DeliveryMan}}</text>
					</template>
					<!-- 自定义右侧值 -->
					<template v-slot:value>
						<uv-button size="mini" text="拨打电话" @click="call(logisticsData.DeliveryManTel)"></uv-button>
					</template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon>
						<uv-icon size="50rpx" name="account"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell>
					<!-- 自定义左侧标题 -->
					<template v-slot:title>
						<text style="font-size:14px;padding:5px 0;">订单编号: {{ info.order_no }}</text>
					</template>
					<!-- 自定义右侧值 -->
					<template v-slot:value>
						<view class="op">
							<uv-button type="primary" size="mini" text="复制" @click="copyOrderNo"></uv-button>
						</view>
					</template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon>
						<uv-icon size="50rpx" name="car"></uv-icon>
					</template>
				</uv-cell>
			</uv-cell-group>
		</view>
		<!-- 物流时间轴 -->
		<view v-if="logisticsData.Traces && logisticsData.Traces.length>0">
			<view class="logistics-timeline" :class="{ 'text-collapsed': !expanded }">
				<view v-for="(item, index) in logisticsData.Traces" :key="index" class="timeline-item">
					<!-- 时间轴节点 -->
					<view class="timeline-node" :class="{ active: index === 0 }"></view>
					<!-- 时间轴内容 -->
					<view class="timeline-content">
						<view class="logistics-header">
							<span class="status-text"
								:class="{ active: index === 0 }">{{ getStatusText(item.Action) }}</span>
							<span class="time-text">{{ item.AcceptTime }}</span>
						</view>
						<view class="logistics-detail">
							<view>【{{item.Location}}】{{ item.AcceptStation }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mt10">
				<uv-text :text="expandName" :suffixIcon="iconName" size="12" iconStyle="font-size: 16px" align="center"
					@click="onExpand" />
			</view>
		</view>
		<view v-else class="tips">暂未查找到物流信息</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getMarketOrderDetail,
		getPackageList,
		getLogistics
	} from '@/api'
	// 复制快递单号
	const copyTrackingNumber = () => {
		navigator.clipboard.writeText(logisticsData.value.LogisticCode)
			.then(() => {
				console.log('复制成功');
			})
			.catch(err => {
				console.error('复制失败:', err);
			});
	};

	// 拨打快递员电话
	const call = (tel) => {
		uni.makePhoneCall({
			phoneNumber: tel
		})
	};
    const activeIndex = ref(0)
	// 数据定义
	const info = ref({})
	const expanded = ref(false);
	const iconName = ref('arrow-down')
	const expandName = ref('展开')
	const onExpand = () => {
		expanded.value = !expanded.value
		iconName.value = expanded.value ? 'arrow-up' : 'arrow-down'
		expandName.value = expanded.value ? '收起' : '展开'
	}
	const status = ref([{
			key: '1',
			value: '已收取快件'
		},
		{
			key: '2',
			value: '运输中'
		},
		{
			key: '202',
			value: '派件中'
		},
		{
			key: '301',
			value: '已签收'
		}
	])
	// 定义方法函数来查找状态文本
	const getStatusText = (key) => {
		const found = status.value.find(item => item.key === key);
		return found ? found.value : '未知状态';
	}
	const packageList = ref([]);
	// 物流数据
	const logisticsData = ref([]);
	const packageClick = (e, i) => {
		activeIndex.value = i
		getLogisticsData(e.delivery_id, e.freight_no)
	}
	const getLogisticsData = async (delivery_id, freight_no) => {
		logisticsData.value = (await getLogistics({
			delivery_id: delivery_id,
			freight_no: freight_no
		})).result
	}

	onLoad(async (option) => {
		if (option.order_id) {
			info.value = (await getMarketOrderDetail({
				order_id: option.order_id,
				merchant_order_id: option.merchant_order_id
			})).result
			if (option.activeIndex) {
				activeIndex.value = Number(option.activeIndex)
			}
			packageList.value = (await getPackageList({
				order_id: option.order_id,
				merchant_order_id: option.merchant_order_id
			})).result
			if (packageList.value.length > 0) {
				getLogisticsData(packageList.value[activeIndex.value].delivery_id, packageList.value[activeIndex.value].freight_no)
			}
		}
	})
</script>

<style lang="scss" scoped>
	.logistics-container {
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 80px;
	}

	.bgcf {
		background-color: #fff;
	}
	
	.box {
		margin: 0 30rpx;
		overflow: hidden;
		.package{
			border-radius: 8px;
			border: #ccc 1px solid;
			display: inline-flex;
			align-items: center;
			padding: 5px 10px 5px 0;
			margin-right: 10px;
		}
		.package.selected{
			border: #ff0000 1px solid;
		}
		.package-left{
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 80rpx;
			.name {
				font-size: 14px;
				font-weight: bold;
				color: #333;
			}
			.name.selected {
				color: #ff0000;
			}
			.num {
				font-size: 12px;
				color:#979797;
			}
		}
	}

	.status-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 8px;
		color: #52c41a
	}

	.address-info {
		font-size: 14px;
		color: #666;
	}

	.op {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tips {
		background-color: #fff;
		padding: 15px;
		text-align: center;
		font-size: 14px;
		color: #999;
	}

	.padding1 {
		padding: 20rpx;
	}

	.padding2 {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.padding3 {
		padding: 10rpx 0 10rpx 10rpx;
	}

	.margin10 {
		margin-right: 10rpx;
	}

	.margin20 {
		margin-left: 10rpx;
		margin-right: 20rpx;
	}

	.t1 {
		color: #333;
		font-size: 30rpx;
	}

	.t2 {
		color: #979797;
		font-size: 24rpx;
		text-align: right;
	}

	.jiage {
		margin-left: 20rpx;
	}

	/* 折叠状态：限制3行+省略号 */
	.text-collapsed {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 56px;
	}

	.order-info {
		padding: 15px;
		margin: 15px 0;
		border-radius: 8px;
		background-color: #f8f8f8;
		font-size: 14px;
	}

	.order-info view {
		margin-bottom: 8px;
	}

	/* 物流时间轴样式 */
	.logistics-timeline {
		position: relative;
		padding: 20px;
		background-color: #fff;
	}

	.timeline-item {
		position: relative;
		padding-bottom: 20px;
	}

	.timeline-node {
		position: absolute;
		left: -10px;
		top: 5px;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: #d9d9d9;
		z-index: 1;
	}

	.timeline-node.active {
		background-color: #52c41a;
	}

	.timeline-item:not(:last-child)::after {
		content: '';
		position: absolute;
		left: -4px;
		top: 17px;
		bottom: 0;
		width: 2px;
		background-color: #d9d9d9;
	}

	.timeline-content {
		margin-left: 15px;
	}

	.logistics-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
	}

	.status-text {
		font-weight: bold;
		color: #333;
	}

	.status-text.active {
		color: #52c41a;
	}

	.time-text {
		font-size: 12px;
		color: #999;
	}

	.logistics-detail {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.mt10 {
		margin-top: 10px;
	}
</style>